<template>
  <el-form :inline="true">
    <el-form-item label="一级分类">
      <el-select v-model="CategoryStore.category1Id" :disabled="disabled">
        <el-option
          v-for="c1 in CategoryStore.category1List"
          :label="c1.name"
          :value="c1.id"
          :key="c1.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select v-model="CategoryStore.category2Id" :disabled="disabled">
        <el-option
          v-for="c2 in CategoryStore.category2List"
          :label="c2.name"
          :value="c2.id"
          :key="c2.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select v-model="CategoryStore.category3Id" :disabled="disabled">
        <el-option
          v-for="c3 in CategoryStore.category3List"
          :label="c3.name"
          :value="c3.id"
          :key="c3.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "CategoryList",
});
</script>

<script setup lang="ts">
import useCategoryStore from "@/stores/category";
import { storeToRefs } from "pinia";

import { onMounted, watch } from "vue";
const CategoryStore = useCategoryStore();

defineProps<{
  disabled: boolean;
}>();

onMounted(() => {
  CategoryStore.getCategory1List();
});

watch(
  () => CategoryStore.category1Id,
  (val) => {
    console.log(val);

    // categoryStore.getCategory2List(val as number)
    if (val) {
      CategoryStore.getCategory2List(val);
    }
  }
);

// 让store中取出的属性都是ref对象 => 就可以直接使用/监视
const { category2Id } = storeToRefs(CategoryStore);
// 监视categoryStore.category2Id的变化
// watch(() => categoryStore.category2Id, (val) => {
watch(category2Id, (val) => {
  // 只有有值, 才去请求
  if (val) {
    CategoryStore.getCategory3List(val);
  }
});
</script>

<style scoped lang="scss"></style>
